<template>
  <!-- 赛事live -->
  <div>
    <div class="pageWrap">
      <el-form label-width="100px">
        <el-form-item label="live封面">
          <template v-if="coverList.length>0">
            <div class="showdBox" v-for="(v,i) in coverList" :key="i">
              <img :src="v" class="cover" />
              <div class="showd" @click="delCover(i)">
                <i class="el-icon-delete"></i>
              </div>
            </div>
          </template>
          <el-upload
            class="upcover"
            :action="upLoadUrl"
            :show-file-list="false"
            :on-success="(value)=> picSuccess(value)"
            :before-upload="(file)=> beforeUpload(file)"
            name="img"
          >
            <!-- <img v-if="cover" :src="cover" class="cover" /> -->
            <!-- v-else  -->
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <p slot="tip" class="tips">只能上传jpg文件，且不超过1MB，建议尺寸 400*160</p>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <p slot="label">友情链接</p>
          <el-button @click="addlink()">添加</el-button>
          <el-form :inline="true">
            <div v-for="(v,i) in links" :key="i">
              <el-form-item label="链接头像">
                <el-upload
                  class="upavatar"
                  :action="upLoadUrl"
                  :show-file-list="false"
                  :on-success="(value)=> linksPicS(i,value)"
                  :before-upload="(file)=> linksPicB(i,file)"
                  name="img"
                >
                  <img v-if="v.cover" :src="v.cover" class="avatar" />
                  <i v-else class="el-icon-plus avatar_icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-input v-model="v.name" placeholder="链接名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="v.link" placeholder="链接路径"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="v.appId" placeholder="链接appId"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" icon="el-icon-delete" circle @click="delLinks(i)"></el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-form-item>
        <el-button type="primary" @click="save()">保存</el-button>
      </el-form>
    </div>
    <div class="pageWrap bro">
      <broadcast />
    </div>
  </div>
</template>

<script>
import broadcast from "./Broadcast";
var eId = 0;
export default {
  components: { broadcast },
  data() {
    return {
      upLoadUrl: this.$url + "/sbr/match/uploadImg",
      links: [],
      coverList:[]
    };
  },
  methods: {
    delCover(i) {
      this.coverList.splice(i, 1);
    },
    picSuccess(v) {
      // this.cover = v.data.filePath;
      this.coverList.push(v.data.filePath);
    },
    beforeUpload(file) {
      // if (this.cover) {
      //   let pp = this.cover.split("/");
      //   pp = this.$Base64.encode(pp[pp.length - 1]);
      //   this.$axios.get("/sbr/match/delImg?fileName=" + pp);
      // }
      let isLength=this.coverList.length<4
      const isJPG = file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if(!isLength){
        this.$message.error("最多可上传4个");
      }
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isLength&&isJPG && isLt1M;
    },
    addlink() {
      this.links.push(
        JSON.parse(JSON.stringify({ cover: "", name: "", link: "", appId: "" }))
      );
    },
    linksPicS(i, v) {
      this.links[i].cover = v.data.filePath;
    },
    linksPicB(i, file) {
      if (this.links[i].cover) {
        let pp = this.links[i].cover.split("/");
        pp = this.$Base64.encode(pp[pp.length - 1]);
        this.$axios.get("/sbr/match/delImg?fileName=" + pp);
      }
      const isJPG = file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
    delLinks(i) {
      if (this.links[i].cover) {
        let pp = this.links[i].cover.split("/");
        pp = this.$Base64.encode(pp[pp.length - 1]);
        this.$axios.get("/sbr/match/delImg?fileName=" + pp);
      }
      this.links.splice(i, 1);
    },
    save() {
      this.links = this.links.filter((v) => {
        return v.name && v.link && v.appId;
      });
      if (this.coverList.length == 0) {
        this.$message.error("请上传封面");
        return false;
      }
      let oo = {
        id: eId,
        matchId: this.$Base64.decode(sessionStorage.getItem("MandA")),
        links: JSON.stringify(this.links),
        cover: this.coverList.join(";"),
      };
      this.$axios.post("/sbr/match/putMatchResult", oo).then((res) => {
        this.$message.success("保存成功");
        this.getLive();
      });
    },
    getLive() {
      this.$axios
        .get(
          "/sbr/match/getMatchResult?matchId=" +
            this.$Base64.decode(sessionStorage.getItem("MandA"))
        )
        .then((res) => {
          let rr = res.data.data;
          if (rr.id) {
            eId = rr.id;
            this.coverList = rr.cover.split(";")
            this.links = JSON.parse(rr.links);
          }
        });
    },
  },
  mounted() {
    this.getLive();
  },
};
</script>
<style scoped>
.bro {
  margin-top: 15px;
}
.showdBox {
  width: 200px;
  height: 80px;
  line-height: 80px;
  position: relative;
}
.showdBox:hover .showd {
  display: block;
}
.showd {
  position: absolute;
  z-index: 10;
  width: 200px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  top: 0;
  left: 0;
  display: none;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}
.upcover >>> .el-upload,
.upavatar >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* .upavatar >>> .el-upload{
  width: 20px;
  height: 20px;
} */

.upcover >>> .el-upload:hover,
.upavatar >>> .el-upload :hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar_icon {
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.avatar {
  width: 40px;
  height: 40px;
}

.cover {
  display: inline-block;
  width: 200px;
  height: 80px;
  line-height: 80px;
}

.tips {
  font-size: 12px;
  /* float: left; */
  line-height: 1.2;
}
</style>